<template>
	<van-cell-group v-show="display">
	  	<van-field v-model="form.password" type="password" placeholder="请输入密码" clearable> </van-field>
	  	<van-field v-model="form.password_confirmation" type="password" placeholder="再次输入密码" clearable> </van-field>
	  	<div class="van-cell van-field mt-10">
	  		<van-button type="primary" class="" size="large" @click="formValidate">{{btnText}}</van-button>
	  	</div>
	</van-cell-group>
</template>
<script>
	import { Field ,CellGroup,Button} from 'vant';
	import Va from 'async-validator';

	const formRule = {
		password : [
			{type : "string" , required: true , message : '请填写密码'},
			{type : "string" , min: 6 , max: 15 , message : '密码6-15位'}
		],
	  	password_confirmation: {type : "string" , required: true , message : '请填写确认密码'},
	};

	export default {
		props :{
	        btnText :  {
	            type: String,
	            required : true,
	        },
	        display :  {
	            type: Boolean,
	            default : false,
	            required : true,
	        },
	        callback :  {
	            type: Function,
	            required : true,
	        },
		},
		components:{
			[Field.name] : Field,
			[CellGroup.name]: CellGroup,
			[Button.name] : Button,
        },
        data (){
	        return{
	        	form :{
	            	phone : '',
	            	phonekey : '',
	            	code : '',
	            	password : '',
	            	password_confirmation : '',
	            },
	            formBool : true,
	        }
	    },
	    methods: {
	    	//数据验证
			formValidate(){
				if(this.form.password!=this.form.password_confirmation){
					this.$toast('密码不相同');return false;
				}
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$toast(errors[0].message);
				  	}else{
				  		this.callback(this.form);
				  	}
				});
			},
	    },
	    created :function(){
	    }
	}
</script>
<style>
	.password .btn{margin-top: 15px;}
	.password.show{display: initial;}
	.password.hide{display: none;}
</style>